<template>
  <!--分类管理->管理页面 -->
  <div class="amendsort" :style="opacitydiv ? 'background:transparent' : ''">
    <div class="" :style="opacitydiv ? 'background:transparent' : ''">
      <div class="amendsort_tit">
        <p>{{ amendsortit }}</p>
      </div>
      <div class="amendsort_bot">
        <div class="amendsort_addbtn">
          <div class="" @click="amendsortaddClick">添加</div>
          <div class="" @click="amendsortaddsClick">添加多个</div>
        </div>
        <div class="amendsort_list">
          <ul
            class="amendsort_ul"
            @click.self="amendsortlistClick"
            ref="amendsortul"
          >
            <li
              class="amendsort_li"
              v-for="(v, i) in amendsort"
              :key="i"
              :style="v.select ? 'background:#e7e6e6' : 'background:#fff'"
              @click.stop="amendsortlistDblclick(i)"
            >
              <input
                v-if="v.select"
                type="text"
                v-model="v.title"
                v-focus
                :ref="`inputfocus${i}`"
                @keyup.enter="amendsortKeyup(i, 'down')"
                @keyup.down="amendsortKeyup(i, 'down')"
                @keyup.up="amendsortKeyup(i, 'up')"
                @focus="inputchange(i)"
                @blur="inputblur(i)"
              />

              <p v-else>{{ v.title }}</p>
            </li>
          </ul>
        </div>
        <div class="amendsort_tool">
          <div class="amendsort_tools">
            <div class="amendsort_confirm" @click="amendsortOkClick">确定</div>
            <div class="amendsort_cancel" @click="amendsortcancelClick">
              取消
            </div>
          </div>
        </div>
      </div>
    </div>
    <amendsortadd
      v-if="amendsortadddiv"
      @childOkClick="amendsortaddsubmitbox"
      @childcancelClick="amendsortcancelsubmitbox"
    />
  </div>
</template>

<script>
import amendsortadd from "@/components/compilecen/amendsortadd";
import mixin from "@/utils/mixin";
import { amendsortKeyupSet } from "@/utils";
import { postBaseSave } from "@/api/user";

export default {
  mixins: [mixin],
  props: ["amendsortit", "amendsortlist", "parId"],
  components: { amendsortadd },
  data() {
    return {
      amendsort: "",
      fields: "",
      amendsortadddiv: false,
      opacitydiv: false,
      pid: 0,
    };
  },
  methods: {
    //键盘事件
    amendsortKeyup(i, type) {
      let index;
      if (type == "down") index = i + 1;
      else if (type == "up") index = i - 1;
      amendsortKeyupSet(index, this.amendsort, this);
    },
    //子传父
    amendsortcancelsubmitbox(value) {
      this.amendsortadddiv = value;
      this.opacitydiv = value;
    },
    amendsortaddsubmitbox(value) {
      value.forEach((v) => {
        if (v.title) {
          v.select = false;
          this.amendsort.push(v);
        }
      });
      this.$nextTick(() => {
        this.$refs.amendsortul.scrollTop = this.$refs.amendsortul.scrollHeight;
      });
    },
    inputchange(i) {
      this.fields = JSON.parse(JSON.stringify(this.amendsort[i].title));
    },
    inputblur(i) {
      if (this.amendsort[i].title == "") {
        this.amendsort[i].title = this.fields;
        this.amendsort.forEach((v, index) => {
          if (i == index)
            v.title = this.fields;
        });
      }
    },
    async classifyModifySave(dataId, title) {
      let dataType;
      if (this.amendsortit == "标签管理") dataType = 2;
      else dataType = 1;
      let info = await postBaseSave({
        dataId, //数据id(修改时必填)
        parentId: this.pid, //父节点id(二级分类时必填，其余情况传0)
        dataType, //数据类型：1-分类数据；2标签数据
        title, //描述
      });
      if (info.data.code == 0) this.$parent.amendsortsubmitbox()
    },
    //添加
    amendsortaddClick() {
      this.amendsort.forEach((v) => {
        v.select = false;
      });
      let obj = {
        dataId: "",
        title: "请编辑",
        select: true,
      };
      this.amendsort.push(obj);
      this.$nextTick(() => {
        this.$refs.amendsortul.scrollTop = this.$refs.amendsortul.scrollHeight;
      });
    },
    //添加多个
    amendsortaddsClick() {
      this.amendsortadddiv = !this.amendsortadddiv;
      if (this.amendsortadddiv) {
        this.opacitydiv = true;
        this.amendsort.forEach((v) => {
          v.select = false;
        });
      }
    },
    //点击空白地方
    amendsortlistClick() {
      this.amendsort.forEach((v) => {
        v.select = false;
      });
    },
    //列表点击
    amendsortlistDblclick(i) {
      this.amendsort.forEach((v) => {
        v.select = false;
      });
      this.amendsort[i].select = true;
      this.$nextTick(() => {
        this.$refs[`inputfocus${i}`][0].focus();
      });
    },
    //取消
    amendsortcancelClick() {
      this.$emit("childcancelClick", false);
    },
    //完成
    amendsortOkClick() {
      //点击确认->和原数据进行比较
      this.amendsort.forEach((v) => {
        if (v.dataId != "") {
          let i = this.amendsortlist.findIndex((v1) => v1.dataId == v.dataId);
          if (v.title !== this.amendsortlist[i].title)
            this.classifyModifySave(v.dataId, v.title);
        } else this.classifyModifySave("", v.title);
      });
      this.$emit("childcancelClick", false);
    },
  },
  mounted() {
    //父级id
    if (this.amendsortit == "二级分类管理") this.pid = this.parId;
    else this.pid = 0;
  },
  created() {
    this.amendsort =JSON.parse(JSON.stringify( this.amendsortlist))
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.btn {
  cursor: pointer;
  width: 79px;
  height: 34px;
  background: #e7e6e6;
  color: #2b2b2b;
  border: 1px solid #bdbdbd;
  border-radius: @radius2;
  font-size: 12px;
}
.amendsort {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 36%;
  height: 286px;
  background: #f6f6f6;
  border-radius: @radius2;

  box-shadow: @shadow;
  z-index: 9999;
  overflow: hidden;
  .amendsort_tit {
    .divDA();
    height: 36px;
    padding: 0 14px;
    background: #fff;
    font-weight: bold;
    font-size: 12px;
  }
  .amendsort_bot {
    padding: 0 14px 12px 14px;
    .amendsort_addbtn {
      display: flex;
      & > div {
        margin: 8px 8px 8px 0;
        cursor: pointer;
        .btn();
        .cen();
      }
    }
  }
  .amendsort_list {
    height: 145px;
    border: 1px solid #bdbdbd;
    border-radius: @radius2;
    background: #fff;
    padding: 12px;
    .amendsort_ul {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      .amendsort_li {
        cursor: pointer;
        width: 110px;
        height: 32px;
        border-radius: 4px;
        padding: 0 12px;
        .divDA();
        input {
          overflow: hidden;
        }
      }
    }
  }
  .amendsort_tool {
    width: 100%;
    height: 34px;
    margin-top: 12px;
    .cen();
    .amendsort_tools {
      display: flex;
      .amendsort_confirm {
        .btn();
        .cen();
        margin-right: 14px;
        background: @color2;
        color: #fff;
      }
      .amendsort_cancel {
        .btn();
        .cen();
      }
    }
  }
}
</style>